<!--公司首页-->
{% extends 'indexLayout.html' %}
{% load static %}
{% block title %}
    <title>囍管家-公司首页</title>
{% endblock %}
{% block css %}
    <!--员工轮播图特效-->
    <link rel="stylesheet" href="{% static 'plugins/staff-carousel-effect/css/jquery.easy_slides.css' %}">
    <!--静态导航栏特效-->
    <link rel="stylesheet" href="{% static 'plugins/navbar-static-effect/css/bootsnav.css' %}">
    <!--旋转轮播图特效-->
    <link rel="stylesheet" href="{% static 'plugins/rotate-carousel/css/demo.css' %}">
    <!-- 图片翻转特效 -->
    <link rel="stylesheet" href="{% static 'plugins/img-flip-effect/css/img-effect.css' %}">
    <!--文字翻转特效-->
    <link rel="stylesheet" href="{% static 'plugins/img-txt-flip/css/flipout_cards.css' %}">
{% endblock %}
{% block content %}
    <!--轮播图-->
    <section class="slideshow rotate-carousel">
        <ul class="navigation">
            {% for value in index_dic.values %}
                {% if forloop.counter0 == 0 %}
                    <li class="navigation-item active">
                        <span class="rotate-holder"></span>
                        <span class="background-holder"
                              style="background-image: url({% static value %});"></span>
                    </li>
                {% else %}
                    <li class="navigation-item">
                        <span class="rotate-holder"></span>
                        <span class="background-holder"
                              style="background-image: url({% static value %});"></span>
                    </li>
                {% endif %}
            {% endfor %}

        </ul>
        <div class="detail">
            {% for key,value in index_dic.items %}
                {% if forloop.counter0 == 0 %}
                    <div class="detail-item active">
                        <div class="headline">{{ key }}</div>
                        <div class="background" style="background-image: url({% static value %});"></div>
                    </div>
                {% else %}
                    <div class="detail-item">
                        <div class="headline">{{ key }}</div>
                        <div class="background" style="background-image: url({% static value %});"></div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </section>
    <!--轮播图-->

    <!--公司介绍-->
    <section class="company-intro">
        <div class="company-img" ontouchstart="this.classList.toggle('hover');">
            <div class="my-img-container cp-intro-img">
                <div class="front" style="background-image: url({% static 'img/index_img/bg1.jpg' %})">
                    <div class="inner">
                        <p>喜管家</p>
                        <span>XIGUANJIA</span>
                    </div>
                </div>
                <div class="back">
                    <div class="inner">
                        <p>{{ company_status }}</p>
                    </div>
                </div>
            </div>
        </div>
        {#        <div class="">#}
        <div class="company-bg-intro">
            <div class="cp-intro-img my-img-container"
                 style="background-image: url({% static 'img/index_img/bg2.jpg' %}); background-size: contain;">
                <div class="bg-and-intro-background">
                </div>
                <div class="bg-and-intro">
                    <p>公司背景及介绍</p>
                    <span>Background and Introduction</span>
                </div>

                <div class="intro-text">
                    <p>{{ company_status }}</p>
                </div>
            </div>
        </div>
        {#        </div>#}
    </section>
    <!--公司介绍-->

    <!-- 员工介绍轮播图 -->
    <section class="staff-intro">
	<span class="my-title">
		员工介绍
	</span>
        <div class="slider slider_four_in_line" data-staff-count={{ staff_count }}>
            {% for stf in staff %}
                <div>
                    <img src="{{ stf.headImg.url }}" style="width:330px;height:330px; border-radius: 20px;">
                    <p style="color:white">姓名：{{ stf.name }}</p>
                    <p style="color:white">职位：{{ stf.position }}</p>
                </div>
            {% endfor %}
            <div class="next_button"></div>
            <div class="prev_button"></div>
        </div>
    </section>
    <!-- 员工介绍轮播图 -->

    <!-- 宣传视频 -->
    <div class="embed-responsive embed-responsive-16by9 introduce-video">
        <video poster="" style="object-fit:fill" width="100%" height="100%" controls>
            <source src="{% static view_url %}" type="video/mp4">
{#            <source src="https://www.bilibili.com/video/BV1ft411Q7Fs?t=2.2" type="video">#}
        </video>
    </div>
    <!-- 宣传视频 -->

    <!-- 业界地位 -->
    <section class="propaganda">
        <div class="pro-img">
            {#            为你而来#}
        </div>
        <div class="pro-txt">
            - 为你而来 -<br>
            - 为爱护航 -
        </div>
        <div class="pro-img-1">
            {#            <h2>为爱护航</h2>#}
        </div>
    </section>
    <!-- 业界地位 -->
{% endblock %}

{% block js %}
    <!-- 员工轮播图特效.js -->
    <script src="{% static 'plugins/staff-carousel-effect/js/jquery.easy_slides.js' %}"></script>
    <!-- 静态导航栏.js -->
    <script src="{% static 'plugins/navbar-static-effect/js/bootsnav.js' %}"></script>
    <!-- 滑动导航栏.js -->
    <script src="{% static 'plugins/navbar-slide-hidden/dist/jquery.bootstrap-autohidingnavbar.min.js' %}"></script>
    <!--旋转轮播图.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/TextPlugin.min.js"></script>
    <script src="{% static 'plugins/rotate-carousel/js/demo.js' %}"></script>
    <!--图片效果js-->
    <script src="{% static 'plugins/img-txt-flip/js/jquery.flipout_cards.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
{% endblock %}
